<template>
  <div class="container">
    <div class="flex_column login">
      <div class="head"></div>
      <div class="headlogo"></div>

      <van-form @submit="onSubmit" class="login_form flexcolumn">
        <!-- <div class="login_title">账号</div> -->
        <div class="flexLR myLoginInput">
          <img style="width: 14px;height: 16px;" src="../../assets/images/用户名.png" />
          <van-field style="margin: 3px 0 0 8px;" v-model="account" name="account" label="" placeholder="请输入用户名/手机号"
            clearable />
        </div>
        <!-- <div class="login_title">密码</div> -->
        <div class="flexLR myLoginInput">
          <img style="width: 14px;height: 16px;" src="../../assets/images/用户名.png" />
          <van-field style="margin: 3px 0 0 8px;" v-model="password" type="password" name="password" label=""
            placeholder="请输入密码" clearable />
        </div>
        <div class="flexLR otherLoginInput">
          <div @click="goToAgreement">认证设置</div>
          <div @click="goToAgreement">找回密码</div>
        </div>
        <div style="width: 100%">
          <van-button round block class="myButton" native-type="submit" v-bind:loading="Loading"
            style="font-size: 17px;font-weight:600;color: white;">登录</van-button>
        </div>
      </van-form>
      <div class="filterlogo"></div>
    </div>
  </div>
</template>

<script name="Login">
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useAppStore } from "@/store";
import { Loading, showNotify } from 'vant';
import { setToken } from "@/utils/auth";

import { showToast, showFailToast } from "vant";

import { login, GetUserSelfInfo, GetProjectList } from "@/api";
export default defineComponent({
  setup() {
    const router = useRouter();
    const appStore = useAppStore();
    const Loading = ref(false);

    const account = ref(null);
    const password = ref(null);
    const onSubmit = async (signInModelData) => {
      if (signInModelData.account == "" || signInModelData.password == "") {
        showToast("请填写用户名或密码！");
        return false;
      }
      Loading.value = true;

      const res = await login(signInModelData);
      if (res.code != 0) {
        showNotify({ type: 'danger', message: res.msg });
        Loading.value = false;
        return false;
      }
      if (res.data) {
        setToken(res.data.token.token)
      }
      const { data, otherData } = await GetUserSelfInfo();
      let myProject = []

      let fd = new FormData();
      fd.append("projecttype", 0);
      fd.append("searchword", "");
      const respro = await GetProjectList(fd);
      if (respro.code == 0 && respro.data) {
        myProject = respro.data
      }
      // 保存用户登录信息
      appStore.setUserLoginInfo(signInModelData);

      // 保存用户信息
      appStore.setUserInfo(data);

      let proInfo = null
      if (myProject.length) {
        if (appStore.projectInfo.id) {
          proInfo = myProject.find(item => item.id == appStore.projectInfo.id)
        } else {
          proInfo = myProject[0]
        }
      } else {
        showToast("您所在机构暂无项目，请联系管理员");
      }
      // 保存项目列表
      appStore.setProjectList(myProject ?? [])

      // 保存当前项目
      appStore.setProjectInfo(proInfo);

      Loading.value = false;
      // localStorage.setItem("checked", JSON.stringify(checked.value));
      router.push('/index');
    };

    // const checked = ref(JSON.parse(localStorage.getItem("checked")) == null ? false : true)
    const goToAgreement = () => {
      showToast("请联系您所在机构信息化管理员");
    }

    onMounted(() => {
      if (appStore.userLoginInfo) {
        account.value = appStore.userLoginInfo.account;
        password.value = appStore.userLoginInfo.password;
      }
    })
    return {
      Loading,
      account,
      password,
      onSubmit,
      goToAgreement
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  background: url('../../assets/images/BG.png') no-repeat;
  background-size: 100% 100%;
  height: 100%;
  // overflow: hidden;
}

.head {
  height: 98px;
  width: 100%;
  background: url('../../assets/images/Group9248.png') no-repeat;
  background-size: 100% 100%;
}

.headlogo {
  height: 191px;
  width: 200px;
  margin-top: 80px;
  background: url('../../assets/images/logo.png') no-repeat;
  background-size: 100% 100%;
}

.filterlogo {
  height: 60px;
  width: 70%;
  margin: 40px;
  background: url('../../assets/images/sslogo.png') no-repeat;
  background-size: 100% 100%;
}

.myLoginInput {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #006CB8;
}

.login {
  width: 100%;
  height: 100%;

  .login_form {
    margin: auto auto;
    width: 83%;
    min-height: 705px;
    padding: 230px 80px 0 80px;
    background: url('../../assets/images/Group 9251.png') no-repeat;
    background-size: 100% 100%;

    .login_title {
      font-size: 33px;
      line-height: 100px;
      color: #fff;
    }
  }

  .van-field {
    width: 100%;
    padding: 0;
    background-color: transparent;
  }

  .otherLoginInput {
    color: #fff;
    font-size: 20px;
    margin-top: 30px;
    text-decoration: underline;
  }

  .myButton {
    width: 100%;
    margin: 85px auto 45px auto;
    border-radius: 2px;
    border: none;
    // box-shadow: 0 6px 10px 2px rgba(0, 119, 255, 0.3);
    // background: linear-gradient(160.78deg, #1DB2FF 13.34%, #047BFF 87.07%);
    background: url('../../assets/images/登录.png') no-repeat;
    background-size: 100% 100%;
    height: 80px;
  }

  .zhongtieyitong {
    background: rgba(150, 150, 150, 0.4);
    width: 47%;
    padding: 2px;
    text-align: center;
    margin: 0 auto;
  }
}

:deep(.van-field__control) {
  color: #fff;
}

:deep(.myLoginInput .van-field__error-message) {
  position: relative;
  top: -8px;
}

:deep(.van-checkbox) {
  justify-content: center;
}
</style>
